import { Breadcrumb } from 'antd';
import { useMemo } from 'react';
import type { YmAddPageLayoutProps } from 'ym-design';
import { YmAddPageLayout } from 'ym-design';
import CategoryAndTrade from '../CategoryAndTrade';
import OStyle from '../index.less';
import List from '../List/packageList';
import { usePRLController } from '../usePRLController';

const { PaneItem } = YmAddPageLayout;

export default function CoursewarePackageLibrary() {
  const { activePage, setActivePage, params } = usePRLController();
  console.log('activePage', activePage);

  const layoutParams: YmAddPageLayoutProps = useMemo(
    () => ({
      leftOperation: {
        onBack: () => {
          setActivePage('tile');
        },
      },
      destroyInactiveTabPane: false,
    }),
    [],
  );

  return (
    <>
      <div hidden={activePage !== 'tile'} style={{ overflow: 'auto', height: '100%' }}>
        <CategoryAndTrade
          type={1}
          onChange={(info) => {
            Object.assign(params, info);
            setActivePage('list');
          }}
        />
      </div>
      {activePage === 'list' ? (
        <YmAddPageLayout {...layoutParams}>
          <PaneItem tabKey="tab1" label="平台课件包列表" className="pane_tab1" style={{ height: '100%' }}>
            <div
              style={{
                background: 'rgb(255, 255, 255)',
                width: '100%',
                height: 'calc(100vh - 118px)',
                minHeight: '480px',
                overflow: 'hidden',
                paddingBottom: '20px',
              }}
            >
              <Breadcrumb
                className={OStyle.plat_list_bread_crumb}
                separator=">"
                items={[
                  {
                    title: params.pName,
                    onClick: () => {
                      setActivePage('tile');
                    },
                  },
                  {
                    className: 'active',
                    title: params.cName,
                  },
                ]}
              />
              <List {...params}></List>
            </div>
          </PaneItem>
        </YmAddPageLayout>
      ) : null}
    </>
  );
}
